<template>
  <div>
    <el-card>
      <el-form ref="memberFormRef" :model="memberForm" :rules="memberFormRules" label-width="90px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="memberForm.name" placeholder="请输入成员姓名"></el-input>
        </el-form-item>
        <el-form-item label="攻读学位" prop="degree">
          <el-select v-model="memberForm.degree" placeholder="请选择">
            <el-option label="硕士研究生" value="硕士"> </el-option>
            <el-option label="博士研究生" value="博士"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="已毕业" prop="graduated">
          <el-radio-group v-model="memberForm.graduated">
            <el-radio label='true'>是</el-radio>
            <el-radio label='false'>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="入学时间" prop="since">
          <el-col :span="11">
            <el-date-picker type="month" placeholder="选择日期" v-model="memberForm.since" format="yyyy 年 MM 月" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item v-if="memberForm.graduated === 'true'" label="毕业时间" prop="until">
          <el-col :span="11">
            <el-date-picker type="month" placeholder="选择日期" v-model="memberForm.until" format="yyyy 年 MM 月" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item v-if="memberForm.graduated !== 'true'" label="研究方向" prop="interests">
          <el-input v-model="memberForm.interests" placeholder="请输入成员研究方向"></el-input>
        </el-form-item>
        <el-form-item v-if="memberForm.graduated === 'true'" label="毕业去向" prop="interests">
          <el-input v-model="memberForm.interests" placeholder="请输入成员毕业去向"></el-input>
        </el-form-item>
        <el-form-item label="上传照片" prop="uploadId">
          <div style="width: 200px;">
            <el-card class="card" :body-style="{ padding: '0px', 'line-height': 'normal'}" shadow="never">
              <img style="width: 100%;" :src="userAvatar"/>
              <div class="card-img-overlay" v-if="isAdd">
                <el-button id="pick-avatar" class="card-btn" type="primary">选择一张图片</el-button>
                <avatar-cropper
                  :upload-form-data="uploadParam"
                  trigger="#pick-avatar"
                  :upload-url="baseURI+'picture/upload'"
                  @uploading="handleUploading"
                  @uploaded="handleUploaded"
                  @completed="handleCompleted"></avatar-cropper>
              </div>
              <div class="card-img-overlay" v-else>
                <el-button id="pick-avatar1" class="card-btn" type="primary">选择一张图片</el-button>
                <avatar-cropper
                  :upload-form-data="uploadParam"
                  trigger="#pick-avatar1"
                  :upload-url="baseURI+'picture/upload'"
                  @uploading="handleUploading"
                  @uploaded="handleUploaded"
                  @completed="handleCompleted"></avatar-cropper>
              </div>
              <div class="card-footer" v-html="message"></div>
            </el-card>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button v-if="isAdd" type="primary" @click="submitMember" :disabled="uploading">立即创建</el-button>
          <el-button v-else type="primary" @click="submitMember" :disabled="uploading">立即更新</el-button>
          <el-button v-if="isAdd" type="info" @click="resetMember">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import AvatarCropper from 'vue-avatar-cropper'
export default {
  props: {
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  components: { AvatarCropper },
  computed: {
    activeTab () {
      return this.$store.state.activeTab
    }
  },
  watch: {
    activeTab: function (val, oldval) {
      if (this.isAdd) return
      if (val === 'updateMember') {
        if (!this.$store.state.activeMember) {
          this.$store.commit('setActiveTab', 'viewMember')
          this.$notify({ title: '注意', message: '请先选择要更新的成员', type: 'warning' })
          return
        }
        var form = this.$store.state.activeMember
        form = JSON.parse(JSON.stringify(form))
        form.since = new Date(form.since)
        if (form.graduated) {
          form.until = new Date(form.until)
          form.graduated = 'true'
        } else {
          form.until = null
          form.graduated = 'false'
        }
        delete form.addTime
        this.memberForm = form
        if (form.uploadId > 0) this.userAvatar = this.baseURI + 'upload/' + form.uploadId
      } else {
        this.resetMember()
        this.$store.commit('setActiveMember', null)
      }
    }
  },
  data () {
    return {
      baseURI: null,
      uploading: false,
      message: '准备上传',
      fileList: [],
      userAvatar: require('@/assets/img/no_avatar.jpg'),
      uploadParam: {
        token: null
      },
      memberForm: {
        token: null,
        name: null,
        degree: null,
        graduated: null,
        since: null,
        until: null,
        interests: null,
        uploadId: null
      },
      memberFormRules: {
        name: [
          { required: true, message: '请输入成员姓名', trigger: 'blur' }
        ],
        degree: [
          { required: true, message: '请选择成员学位', trigger: 'blur' }
        ],
        graduated: [
          { required: true, message: '请选择成员是否已毕业', trigger: 'blur' }
        ],
        since: [
          { required: true, message: '请选择成员入学时间', trigger: 'blur' }
        ],
        until: [
          { required: true, message: '请选择成员毕业时间', trigger: 'blur' }
        ],
        interests: [
          { required: true, message: '请输入成员研究方向/毕业去向', trigger: 'blur' }
        ],
        uploadId: [
          { required: true, message: '请选择成员照片', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.baseURI = this.$http.defaults.baseURL
    this.uploadParam.token = window.sessionStorage.getItem('token')
  },
  methods: {
    submitMember () {
      this.memberForm.token = window.sessionStorage.getItem('token')
      this.$refs.memberFormRef.validate(async valid => {
        if (!valid) return
        if (this.memberForm.graduated === 'false') delete this.memberForm.until
        const { data: res } = await this.$http.post('member/submit', this.memberForm)
        if (!res.success) {
          this.$message.error(res.info)
        } else {
          this.$message.success(res.info)
          this.$store.commit('setMemberListBlur', true)
          if (this.isAdd) this.resetMember()
          else this.$store.commit('setActiveTab', 'viewMember')
        }
      })
    },
    resetMember () {
      this.uploading = false
      this.$refs.memberFormRef.resetFields()
      this.userAvatar = require('@/assets/img/no_avatar.jpg')
      this.message = '准备上传'
    },
    handleUploading (form, xhr) {
      this.uploading = true
      this.message = '上传中...'
    },
    handleUploaded (response) {
      this.uploading = false
      if (response.success) {
        const uploadId = response.picture.thumbnails_uploadId
        this.userAvatar = this.baseURI + 'upload/' + uploadId
        this.message = '图片上传完成.'
        this.memberForm.uploadId = uploadId
      }
    },
    handleCompleted (response, form, xhr) {
      this.uploading = false
      this.message = '上传成功.'
    },
    handlerError (message, type, xhr) {
      this.uploading = false
      this.message = '哎呀，出错啦...'
    }
  }
}
</script>

<style scoped>
.card-footer{
  color: #6c757d;
  background-color: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.125);
  text-align: center;
  padding: 20px;
}
.card-img-overlay{
  display: none;
  transition: all 0.5s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}
.card-btn{
  margin-top: 120px;
  margin-left: 17px;
}
.card:hover .card-img-overlay {
  display: block;
}
</style>
